.draggableBox {
    position: absolute;
    cursor: move;
    box-sizing: content-box;
    outline: 1px dashed #1890FF;
}

.draggablePoint {
    z-index: 1;
    position: absolute;
    width: 6px;
    height: 6px;
    border: 3px solid #1890FF;
    border-radius: 5px;
    background-color: #fff;

    &.t {
        width: 20px;
        transform: translate(-50%, -100%);
    }

    &.b {
        width: 20px;
        transform: translate(-50%);
    }

    &.l,
    &.r {
        height: 20px;
    }

    &.r {
        transform: translate(0%, -50%);
    }

    &.l {
        transform: translate(-100%, -50%);
    }

    &.rt {
        transform: translate(0%, -100%);
    }

    &.rb {
        transform: translate(0%, 0%);
    }

    &.lb {
        transform: translate(-100%, 0%);
    }

    &.lt {
        transform: translate(-100%, -100%);
    }
}

.draggableActiveModal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #1890FF;
    opacity: .1;
}